<template>
  <div class="mydetails">
    <van-nav-bar
      title="在线生成简历"
      left-text="返回"
      right-text="完成"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-cell-group>
      <van-field v-model="name" label="姓名" placeholder="请输入姓名" required/>
      <van-field v-model="sex" label="性别" placeholder="请输入性别" required/>
      <van-field v-model="birth" label="出生年月" placeholder="请输入出生年月" @click="show" required/>
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onWTimeConfirm"
　　    @cancel="oncancel"
      />
      <van-field v-model="education" label="学历" placeholder="请输入学历" />
      <van-field v-model="school" label="毕业院校" placeholder="请输入毕业院校"/>
    </van-cell-group>
  </div>
</template>
<style>
  .mydetails .van-picker{
      display: none;
  }
</style>
<script>
import { Dialog } from 'vant';
export default {
    data(){
        return {
            name:"",
            sex:"",
            birth:"",
            minDate: new Date(1970, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: "",
            education:"",
            school:""
        }
    },
    methods:{
        onClickLeft(){
          // 返回
          window.history.go(-1);
        },
        onClickRight(){
          // 点击完成，要保存到数据库，并且显示到home页面
          console.log("完成，保存到数据库，跳回myhome界面");
          this.$router.push("/myhome");
        },
        show(){//展示输入日期框
            let form = document.getElementsByClassName("van-picker")[0];
            form.style.display = "block";
        },
        displaynoe(){//隐藏日期框
            let form = document.getElementsByClassName("van-picker")[0];
            // console.log(form);
            form.style.display = "none";
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
        onWTimeConfirm(){
          // 点击选择时间的确认按钮，保存时间到input内，最后关闭选择时间的框
            let year = new Date(this.currentDate).getFullYear();
            let month = new Date(this.currentDate).getMonth()+1; 
            this.birth = `${year}年${month}月`;
            this.displaynoe();
        },
        oncancel(){
          // 按了取消之后弹出消息提示，只有确认按钮，没有之后的操作
            Dialog.alert({
              message: '请重新选择出生年月，该内容为必填项。',
            }).then(() => {
              // on close
            });
        }
    }
}
</script>